﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script type="text/javascript">
    function getInputData(formData) {
      document.getElementById("datashow").innerText = formData;
    }

    function ButtonPressed(ButtonId) {
      document.getElementById("ButtonShow").innerText += "按下" + ButtonId;
    }

    function ButtonUnpressed(ButtonId) {
      document.getElementById("ButtonShow").innerText += "抬起" + ButtonId;
    }

    function ButtonClicked(ButtonId) {
      document.getElementById("ButtonShow").innerText += "点击" + ButtonId;
    }


    function AddGameItem(index, PicPath, GameName) {
      var GameItemDiv = document.createElement("div");
      GameItemDiv.id = "GameItem" + index;
      GameItemDiv.style.width = "300px";
      GameItemDiv.style.height = "350px";
      GameItemDiv.style.position = "relative";
      GameItemDiv.style.float = "left";


      var GamePicDiv = document.createElement("div");
      GamePicDiv.className = "GamePic";
      GamePicDiv.style.width = "300px";
      GamePicDiv.style.height = "300px";
      GamePicDiv.style.backgroundImage = "url(" + PicPath + ")";
      GamePicDiv.style.backgroundAttachment = "background-attachment:fixed";
      GamePicDiv.style.backgroundSize = "100% 100%";

      var GameNameDiv = document.createElement("div");
      GameNameDiv.className = "GameName";
      GameNameDiv.style.width = "300px";
      GameNameDiv.style.height = "50px";
      GameNameDiv.innerText = GameName;
      GameNameDiv.id = "GameNameDiv" + index;

      GameItemDiv.appendChild(GamePicDiv);
      GameItemDiv.appendChild(GameNameDiv);

      GameItemDiv.setAttribute("onclick", "GameItemDivOnclicked(" + index + ")");
      document.getElementById("Content").appendChild(GameItemDiv);
    }

    function GameItemDivOnclicked(index) {
      document.getElementById("Top").innerText = document.getElementById("GameNameDiv" + index).innerText;
    }

    function AddHMDButton(index, HMDState, HMDIP, HMDName) {
      var ButtonItemDiv = document.createElement("div");
      ButtonItemDiv.id = "ButtonItemDiv" + index;
      ButtonItemDiv.style.float = "left";
      ButtonItemDiv.style.width = "300px";
      ButtonItemDiv.style.height = "150px";

      var ButtonContextDiv = document.createElement("div");
      ButtonContextDiv.id = "ButtonContextDiv" + index;
      ButtonContextDiv.style.width = "300px";
      ButtonContextDiv.style.height = "50px";
      ButtonContextDiv.innerText = index + "号|" + HMDName + "|" + HMDIP + (HMDState ? "|忙碌" : "|空闲");

      var OpenButton = document.createElement("button");
      OpenButton.id = "OpenButton" + index;
      OpenButton.textContent = HMDState ? "关闭" : "开启";
      OpenButton.setAttribute("onclick", "OnOpenButtonClicked(" + index + ",'" + HMDIP + "')");


      ButtonItemDiv.appendChild(ButtonContextDiv);
      ButtonItemDiv.appendChild(OpenButton);
      document.getElementById("Left").appendChild(ButtonItemDiv);
    }

    function OnOpenButtonClicked(index, Mac) {
      var GameName = null;
      if (document.getElementById("OpenButton" + index).textContent == "开启") {
        var GameName = document.getElementById("Top").innerText;
        if (GameName == "") {
          GameName = null;
        }
      }
      var data =
        {
          'No': index,
          'Name': GameName,
          'Mac': Mac
        }
      //alert(GameName);
      connectHtml.receivedata(JSON.stringify(data));
      //alert(JSON.stringify(data));
    }

    function UpdateHMDState(index, HMDState, HMDIp, HMDName) {
      var ButtonItem = document.getElementById("ButtonItemDiv" + index);
      if (ButtonItem != null) {
        ButtonItem.childNodes[0].innerText = index + "号|" + HMDName + "|" + HMDIp + (HMDState ? "|忙碌" : "|空闲");
        ButtonItem.childNodes[1].textContent = HMDState ? "关闭" : "开启";
        return;
      }
      AddHMDButton(index, HMDState, HMDIp, HMDName);
    }

    ///界面接受
    var InterfaceData;

    function Interface(InterfaceData) {
      //alert(JSON.stringify(InterfaceData));
      if (InterfaceData != null) {
        var res = InterfaceData;
        for (i = 0; i < res.length; i++) {
          AddGameItem(i, InterfaceData[i]['image'], InterfaceData[i]['gameName']);
        }
        //alert("我是Form窗体返回给页面的数据：" +_address+InterfaceData['Tables'][0]['Rows'][0]['ImageAddress']);//JSON.stringify(res[0]));
        return;
      }
    }

    ///客户端状态接受
    var StateData;

    function State(StateData) {
      //  alert(JSON.stringify(StateData));
      if (StateData != null) {
        for (i = 0; i < StateData.length; i++) {
          UpdateHMDState(StateData[i]['No'], StateData[i]['Active'], StateData[i]['Mac'], StateData[i]['Name']);
        }
        //document.getElementById("StateDataShow").innerText = JSON.stringify(StateData);
        //  alert("我是Form窗体返回给页面的数据：" + StateData[0]['N']);
        return;
      }
    }

    window.onload = function () {
      connectHtml.htmlover();
    };
  </script>
</head>
<body>
<input id="Text1" type="text"/>
<input id="Button1" type="button" value="button"/>
<div id="Top" style="position:absolute;left:0px;top:0px;width:300px;height:100px;background-color:#808080">

</div>
<div id="Left" style="position:absolute;left:0px;top:100px;width:300px;height:980px;background-color:#808080">

</div>
<div id="Content" style="position:absolute;left:500px;top:100px;width:1000px;height:800px;background-color:#ff0000">

</div>
<!--<div id="pic" style="position:relative;width:500px;height:1000px;background-image:url(PIC.jpg)">
</div>-->
</body>
</html>
